<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px"> 用餐方式</span>
      </div>
      <div style="margin-top: 10px">
        <div class="dingingMethods" ref="dingingMethods" style="width: 100%; height: 250px"></div>
      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'

let chart = null
export default {
  mounted() {
    chart = echarts.init(this.$refs.dingingMethods)
    this.orderOptions()
  },
  methods:{
    orderOptions(){
      // 获取当前日期
      var currentDate = new Date();

// 生成最近15天的日期
      var xAxisData = [];
      for (var i = 0; i < 15; i++) {
        var dayOfMonth = currentDate.getDate();
        xAxisData.unshift(dayOfMonth.toString()); // 将日期添加到数组的开头
        // 将当前日期向前推一天
        currentDate.setDate(currentDate.getDate() - 1);
      }


      const Dataseries=[
        {
          name:'送餐',
          data:[800,600,200,300,900,900,800,1000,500,300,400,1100,900,800,900,300,200] ,
          // data:[["2023-09-07 08:31:00",72000], ["2023-09-07 09:31:00",84000],  ["2023-09-07 10:31:00",60000],  ["2023-09-07 11:31:00",30000],  ["2023-09-07 12:31:00",30000],  ["2023-09-07 13:31:00",90000], ["2023-09-07 14:31:00",90000], ["2023-09-07 15:31:00",54000], ["2023-09-07 16:31:00",30000]],
          type: 'line',
          color:'rgba(28, 219, 254, 1)',
          smooth:true,
          areaStyle: {
            normal: {

              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(13, 222, 156, 0.5)'
              }, {
                offset: 1,
                color: 'rgba(8, 79, 160, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          symbol: 'circle',
          symbolSize: 5,
        },
        {
          name:'堂食',
          data:[200,150,50,100,350,360,300,380,100,50,120,330,310,240,290,50,30],

          type: 'line',
          color:'rgba(13, 222, 156, 1)',
          smooth:true,
          areaStyle: {


            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(255, 215, 37, 0.3)'
            }, {
              offset: 0.8,
              color: 'rgba(8, 79, 160, 0)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10

          },
          symbol: 'circle',
          symbolSize: 5,
        }
      ]

      const option = {

        tooltip: {
          trigger: 'axis',
          // axisPointer: { // 禁用轴线
          //   type: 'none',
          // },
          backgroundColor: '#040737',
          borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
          borderWidth: 2, // 设置边框宽度，这里是2像素
          textStyle: { // 设置文本样式
            color: '#ffffff', // 设置文本颜色
            fontSize: 16 // 设置文本字体大小
          },
          axisPointer: { // 禁用轴线
            type: 'none',
          },
          formatter: function (params) {

            let value1=0
            let value2=0
            let total=0
            var currentDate = new Date();
            var currentDay = currentDate.getDate();
            var currentMonth = currentDate.getMonth() + 1; // +1 是因为月份从0开始计数
            if(currentDay<params[0].axisValue){
              currentMonth=currentMonth-1
            }
            if(currentMonth>12){
              currentMonth=1
            }

            for(let i in params){
              if(params[i].seriesName=='送餐'){
                value1=params[i].value
              }
              if(params[i].seriesName=='堂食'){
                value2=params[i].value
              }

            }
            total=value1+value2

            return `<div>${currentMonth}月 ${params[0].axisValue} 日</div>
             <div><span style="width: 9px;height: 9px;background: #1CDBFE;border-radius: 50%;display: inline-block"></span> <span>送餐:</span><span>${ value1}</span></div>
             <div><span  style="width: 9px;height: 9px;background: #0DDE9C;border-radius: 50%;display: inline-block"></span> <span>堂食:</span><span>${ value2}</span></div>
             <div><span  style="width: 9px;height: 9px;background: #E4C431;border-radius: 50%;display: inline-block"></span> <span>总数:</span><span>${ total}</span></div>
            `
          }.bind(this),
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        xAxis: {
          type: 'category',
          // min: "dataMin",
          // max: "dataMax",

          nameGap: 20,

          data:xAxisData,
          axisLabel: {
            interval: 0, // 设置标签全部显示
            // rotate: 20, // 旋转角度，以适应较长的标签
            textStyle: {
              fontSize: 14, // 设置标签字体大小
            },
            formatter: function (value) {
              return value
            }

          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#4FA6F7', // 设置X轴颜色
            },

          },
        },
        grid: {
          left: '2%', // 调整left属性来控制X轴标签的水平位置
          top: '20%',  // 调整top属性来控制X轴标签的垂直位置
          right: '2%',
          bottom: '15%',

        },
        yAxis: {
          type: 'value',
          show: false,

        },
        legend: {
          data: ["堂食","送餐"],
          orient: 'horizontal', // 图例横着排
          textStyle: {
            color: '#4FA6F7', // 设置图例字的颜色
          },
          padding: [30, 0, 0, 0],
          right: 10, // 距离右边的距离
        },
        series:Dataseries,
      }
      chart.setOption(option);
    },
  }
}

</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 270px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
}
:deep(.dv-border-svg-container) {
  display: none;
}
</style>
